<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: none;
        }

        body, html {
            width: 100%;
            height: 100%;
            background: url(images/bg.jpg) no-repeat center;
            background-size: cover;
        }

        img {
            width: 18px;
            height: 18px;
            position: absolute;
        }

    </style>
    <script src="./js/animate.tools.js"></script>
</head>
<body>
<script>

    function Fireworm(){
        this.ele=null;
        this.init=function(){
            this.ele=document.createElement("div");
            document.body.appendChild(this.ele);
            this.ele.style.width="25px";
            this.ele.style.height="25px";
            this.ele.style.position="absolute";
            this.ele.style.background="url(./images/1.jpg) center";
            this.ele.style.backgroundSize="cover";
            return this;
        }
        //思想,飞到哪里去

        this.position=function(){
            return{
                left:Math.random()*document.documentElement.offsetWidth,
                top:Math.random()*document.documentElement.offsetHeight
            }
        }
        this.fly=function(){
            var obj=this;
            tools.animate(this.ele,this.position(),function(){
                obj.fly();
            })
        }
    }
    for (var i = 0; i < 50; i++) {
        new Fireworm().init().fly();
    }


</script>

</body>
</html>